<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import httpInstance from "@/http";

const form = ref({
  name: "",
  file: [],
})
const fileList = ref([
])

//这个方法必须要，不然报错
const uploadFile = (v) => {
  console.log(v.file);
}
//多文件上传必须使用的方法
const uploadChange=(file,fileList)=>{
  form.value.file=fileList;
}

const uploadExceed = () => {
  ElMessage.warning("已超出最大文件数！")
}
//若文件不能传也会删一次调用这个方法
const onRemove = () => {
  alert('是否进行删除')
}

//放大
let dialogImageUrl = ref('')  //弹窗显示
let dialogVisible = ref(false) //放大图片路径

const onPreview = (f) => {
  //弹框显示
  dialogVisible.value = true
  dialogImageUrl.value = f.url
}

//校验类型以及大小
const beforeUpload = (file) => {
  const isJpg = file.type === 'image/jpeg';
  const isValidSize = file.size / 1024 / 1024 < 2;
  if (!isJpg) {
    ElMessage.warning("仅仅支持jpg格式文件");
    return false;
  }
  if (!isValidSize) {
    ElMessage.warning("文件大小不能超过2M");
    return false;
  }
  return isJpg;
}
const onSubmit = async () => {
  //数据交互
  let formData = new FormData();
  formData.append('name', form.value.name); //值类型要value.name
  //多文件上传
  for(var i=0;i<form.value.file.length;i++){
    formData.append('files', form.value.file[i].raw);
  }
  //axios
  let data = await httpInstance.post('/systemFile/fileUpload3', formData, {
    //表单包含文件上传
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
  if (data.code === '20000')
    ElNotification({
      title: '消息',
      message: ('i', { style: 'color: teal' }, '文件上传成功'),
      duration: 2000
    })
}
</script>


<template>

  <el-card style="max-width: 800px">
    <template #header>
      <div class="card-header">
        <span>多文件上传</span>
      </div>
    </template>

    <el-form :model="form" label-width="auto" style="max-width: 800px">
      <el-form-item label="文件名称">
        <el-input v-model="form.name" />
      </el-form-item>
       
      <!-- 多文件上传要用到 uploadChange -->
      <el-form-item label="上传文件">
        <el-upload v-model:file-list="fileList" class="upload-demo" action="" 

          :http-request="uploadFile" 
           limit="6"
          :on-exceed="uploadExceed" 
          :before-upload="beforeUpload" 
          :on-preview="onPreview" 
          list-type="picture-card"
          multiple
          :on-change="uploadChange"

           >
          <el-icon>
            <Plus />
          </el-icon>

          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500KB.
            </div>
          </template>
        </el-upload>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>

      <el-dialog v-model="dialogVisible">
        <!-- max-width等控制弹窗大小 -->
        <img w-full :src="dialogImageUrl" alt="Preview Image"  style="max-width: 100%">
      </el-dialog>

    </el-form>

  </el-card>



</template>


<style lang="scss" scoped></style>